<template>
  <div class="pie-box">
    <div class="info">
      <div class="tip">{{ m }}月总额（元）</div>
      <div class="val">{{ total }}</div>
      <div class="tip">剩余金额（元）</div>
      <div class="val">{{ price }}</div>
    </div>
    <div class="pie" ref="pieChart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
let Option = {
  tooltip: {
    trigger: "item",
    formatter: "{b}:{c}元"
  },
  color: ["#97302F", "#0E35FF"],
  legend: {
    bottom: 0,

    textStyle: {
      color: "#787DAB"
    }
  },
  series: [
    {
      type: "pie",
      radius: ["30%", "68%"],
      label: {
        show: true,
        color: "#FFF",
        formatter: "{c}元",
        fontSize: 10
      },
      data: [
        { value: 0, name: "消耗金额" },
        { value: 0, name: "剩余金额" }
      ]
    }
  ]
};
export default {
  name: "Pie",
  props: {
    m: String
  },
  data() {
    return {
      price: 0,
      total: 0
    };
  },
  created() {},
  mounted: function() {},
  methods: {
    buildChart(Balance, price) {
      Option.series[0].data[0].value = Balance; //消耗金额
      Option.series[0].data[1].value = price; //剩余金额
      this.price = price;
      this.total = price + Balance;
      let myChart = echarts.init(this.$refs["pieChart"]);
      myChart.setOption(Option);
    }
  }
};
</script>
<style lang="scss">
.pie-box {
  display: flex;
  width: 100%;
  .info {
    width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10%;
    height: 300px;
    .tip {
      color: #787dab;
      font-size: 12px;
    }
    .val {
      font-size: 20px;
      color: #fff;
      margin-top: 8px;
      margin-bottom: 30px;
    }
  }
  .pie {
    flex: 1;
    height: 300px;
  }
}
</style>
